import React, { useState } from 'react'
import { 
  Input, 
  Button, 
  Card, 
  Space,
  Form,
  FormItem
} from '@hi-ui/hiui'

const TestPage = () => {
  const [inputValue, setInputValue] = useState('')
  const [passwordValue, setPasswordValue] = useState('')

  const handleInputChange = (e) => {
    console.log('Input change event:', e)
    setInputValue(e.target.value)
  }

  const handlePasswordChange = (e) => {
    console.log('Password change event:', e)
    setPasswordValue(e.target.value)
  }

  return (
    <div style={{ padding: '20px' }}>
      <h1>HiUI 组件测试页面</h1>
      
      <Card title="输入框测试" style={{ marginBottom: '20px' }}>
        <Space direction="vertical" size="large">
          <div>
            <label>普通输入框：</label>
            <Input
              placeholder="请输入内容"
              value={inputValue}
              onChange={handleInputChange}
              style={{ width: '300px' }}
            />
            <p>当前值: {inputValue}</p>
          </div>
          
          <div>
            <label>密码输入框：</label>
            <Input
              type="password"
              placeholder="请输入密码"
              value={passwordValue}
              onChange={handlePasswordChange}
              style={{ width: '300px' }}
            />
            <p>当前值: {passwordValue}</p>
          </div>
          
          <div>
            <label>只读输入框：</label>
            <Input
              value="这是只读内容"
              readOnly
              style={{ width: '300px' }}
            />
          </div>
          
          <div>
            <label>禁用输入框：</label>
            <Input
              placeholder="禁用状态"
              disabled
              style={{ width: '300px' }}
            />
          </div>
        </Space>
      </Card>
      
      <Card title="按钮测试">
        <Space>
          <Button type="primary">主要按钮</Button>
          <Button>默认按钮</Button>
          <Button type="dashed">虚线按钮</Button>
          <Button type="text">文本按钮</Button>
        </Space>
      </Card>
    </div>
  )
}

export default TestPage
